<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3响应原理</title>
  </head>
  <body>
    <script>
      let persion = {
        name: '张三',
        age: 18,
      }

      let p = new Proxy(persion, {
        //   获取属性值
        get(target, props) {
          console.log('target', target, props)
          console.log('获取属性值，更新页面')
          //   return target[props] //vue2处理方式
          // Vue3处理方式
          Reflect.get(target, props)
        },
        // 修改、更新属性值
        set(target, props, value) {
          console.log('修改或者更新属性值，更新页面')
          //   target[props] = value  //vue2处理方式
          // Vue3处理方式
          Reflect.set(target, props, value)
        },
        // 删除属性使用
        defineProperty(target, props) {
          console.log('删除属性,更新页面')
          //   return delete target[props]
          return Reflect.defineProperty(target, props)
        },
      })
    </script>
  </body>
</html>
